<template>
	<view class="update-login-password">
		<view class="title">
			修改操作密码
		</view>

		<view class="form">
			<u--form :model="form" ref="uForm">
				<view>
					<u-form-item prop="oldPassword" borderBottom>
						<u--input placeholder="请输入旧密码" border="none" v-model="form.oldPassword" fontSize="13"
							maxlength="18" :customStyle="inputCustomStyle" @change="change()"></u--input>
					</u-form-item>
				</view>

				<view>
					<u-form-item prop="newPassword" borderBottom>
						<u--input placeholder="请输入新密码" border="none" v-model="form.newPassword" fontSize="13"
							suffixIcon="eye" maxlength="18" :suffixIconStyle="suffixIconStyle"
							:customStyle="inputCustomStyle" @change="change()"></u--input>
					</u-form-item>
				</view>

				<view>
					<u-form-item prop="confirmPassword" borderBottom>
						<u--input placeholder="请再次输入您的新密码" border="none" v-model="form.confirmPassword" fontSize="13"
							suffixIcon="eye" maxlength="18" :suffixIconStyle="suffixIconStyle"
							:customStyle="inputCustomStyle" @change="change()"></u--input>
					</u-form-item>
				</view>
				<view class="bottom-tip">
					注：密码要求6至18位。
				</view>

				<u-button @click="submit()" :color="codeButtonColor" :customStyle="submitCustomStyle"
					:disabled="submitDisabled" shape="circle">确定</u-button>
			</u--form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					oldPassword: '',
					newPassword: '',
					confirmPassword: '',
				},
				suffixIconStyle: {
					width: '32rpx',
					height: '20rpx',
				},
				inputCustomStyle: {
					padding: '50rpx 6rpx 0 6rpx',
				},
				codeButtonColor: '#6072FF',
				submitCustomStyle: {
					height: '88rpx',
					marginTop: '107rpx',
					fontSize: '28rpx',
				},
				submitDisabled: true, //确认按钮是否禁用
			}
		},
		methods: {
			change() {
				if (!this.$u.test.isEmpty(this.form.oldPassword) && !this.$u.test.isEmpty(this.form.newPassword) && !this
					.$u.test.isEmpty(this.form.confirmPassword)) {
					this.submitDisabled = false;
				} else {
					this.submitDisabled = true;
				}
			},
			//提交
			submit() {
				if (this.form.oldPassword.length < 6 || this.form.oldPassword.length > 18) {
					this.$helpers.toast('旧密码长度为6-18位');
					return;
				}
				if (this.form.newPassword.length < 6 || this.form.newPassword.length > 18) {
					this.$helpers.toast('新密码长度为6-18位');
					return;
				}
				if (this.form.newPassword != this.form.confirmPassword) {
					this.$helpers.toast('新密码与确认密码必须一致');
					return;
				}

				this.submitDisabled = true;
				uni.showLoading({
					title: '请求中...',
					mask: true
				});

				let params = {
					password: this.form.oldPassword,
					newPassword: this.form.newPassword
				}

				this.$api('user.operatePwdReset', params).then(res => {
					uni.hideLoading();
					if (res.status == 0) {
						this.$helpers.toast("修改成功", 'success', 2000, true, () => {
							uni.reLaunch({
								url: '/pages/my/my'
							})
						})
					} else {
						this.$helpers.toast('修改失败' + res.msg);
					}
					this.submitDisabled = false;
				}).catch(err => {
					uni.hideLoading();
					if (err.errMsg == null || err.errMsg == '') {
						err.errMsg = '操作失败';
					}
					this.$helpers.toast(err.errMsg);
					this.submitDisabled = false;
				})

			}
		}
	}
</script>

<style lang="scss" scoped>

	.update-login-password {
		min-height: 100vh;
		background-color: #FFFFFF;
		padding: 0 57rpx;
		font-family: "Noto Sans SC";

		.title {
			padding: 70rpx 0 14rpx 0;
			color: rgb(0, 0, 0);
			font-size: 46rpx;
			line-height: 68rpx;
		}

		.bottom-tip {
			font-size: 26rpx;
			color: #E65454;
			margin-top: 15rpx;
		}


	}
</style>